<template>
	<view class="wrapper">
		<view class="top-fixed">
			<u-search placeholder="请输入会员名称、手机号" :show-action="false" v-model="params.name" @change="clickSearch"></u-search>
			<navigator url="/subpackage/my/member/edit" hover-class="none">
				<u-icon name="man-add" color="#19BE6B"></u-icon>
			</navigator>
		</view>

		<scroll-view v-if="list.length" class="list" scroll-y  @scrolltolower="getData(true)">
			<navigator :url="`/subpackage/my/member/edit?id=${item.memberId}`" hover-class="none" class="item-wrapper" v-for="item in list" :key="item.memberId">
				<view class="item" >
					<view class="info-wrapper">
						<image src="/static/images/my/member.png" alt="" mode="widthFix" />
						<view class="info">
							<view class="name">
								{{item.memberName}}
							</view>
							<view class="phone">
								{{item.phone}}
							</view>
						</view>
					</view>
					<view class="balance">
						<view class="label">
							余额:
						</view>
						<view class="value">
							{{item.balance}}
						</view>

					</view>
					<view class="delete" >
						<view  @click.stop="delMember(item)">
							<u-icon size="46" color="red" name="man-delete" ></u-icon>
						</view>

					</view>
				</view>
			</navigator>
		</scroll-view>
		<view class="empty" v-if="list.length===0">
			<u-empty text="暂无数据"></u-empty>
		</view>

	<!-- 	<view class="add" :style="{top:listHeight+'px'}">
			<u-button color="#FFC300" round circle @click="toAdd">新增会员</u-button>
		</view> -->
	</view>
</template>

<script setup>
	import memberApi from '@/api/member'
	import {
		ref,
		reactive,
		unref
	} from "vue"
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import member from '@/api/member';
	import {debounce} from "@/utils"
	const list = ref([])
	const params = reactive({
		pageNo: 1,
		pageSize: 10,
		name: "",
	})
	const listHeight = ref("80vh")
	let totalPage = 2

	// 获取列表可以显示的高度
	function getHeight() {
		const res = uni.getSystemInfoSync()
		const {
			safeArea,
			windowHeight,
			screenHeight
		} = res
		listHeight.value = windowHeight - (screenHeight - safeArea ? safeArea.bottom : 0) - 64
	}
	/**
	 * 获取数据
	 * @param add -如果为true表示是触底请求数据
	 */
	async function getData(add = false) {
		if (add) {
			if (params.pageNo >= totalPage) return
			params.pageNo++
		}else{
			params.pageNo = 1
		}
		const {data} = await memberApi.getMemberList(params)
		totalPage = data.totalPage
		list.value = add?unref(list).concat(data.list):data.list
	}
	// 搜索
	const clickSearch = debounce(function (val){
		params.pageNo = 1
		getData()
	},400)
	// 删除会员
	async function delMember(val){
		const res = await uni.showModal({
			title:"提示",
			content:"确定删除会员？"
		})
		if(!res.confirm)return
		await memberApi.deleteMember({id:val.memberId,state:-1})
		getData()
	}
	// 去新增会员
	function toAdd() {
		uni.navigateTo({
			url: "/subpackage/my/member/edit"
		})
	}


	onLoad(() => {
		getHeight()

	})
	onShow(()=>{
		getData()
	})
</script>

<style lang="scss" scoped>
	.wrapper {
		.top-fixed{
			position: fixed;
			top: 0;
			left: 0;
			padding: 0 20rpx;
			height: 100rpx;
			width: 100vw;
			box-sizing: border-box;
			background-color: white;
			z-index: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			u-search {
					flex: 1;
					&::v-deep .u-search{
						width: 95%;
					}
			}
			&::v-deep .u-icon{
				font-size: 51rpx;
			}
		}
		.empty{
				margin-top: 400rpx;
		}
		.list {
			padding: 106rpx 0;
			box-sizing: border-box;

			.item-wrapper {
				padding: 13rpx;
				.item {
					box-shadow: 0 0 20rpx rgba(10, 10, 10, .2);
					border-radius: 10rpx;
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					z-index: 9;

					.info-wrapper {
						display: flex;
						align-items: center;

						image {
							width: 50rpx;
							height: 50rpx;
						}

						.info {
							margin-left: 20rpx;

							.name {
								font-weight: bold;
								font-size: 30rpx;
								padding-bottom: 7rpx;
								color:#2979FF;
							}

							.phone {
								font-size: 29rpx;
								color: #5c5c5f;
							}
						}

					}

					.balance {
						display: flex;
						font-size: 32rpx;
						font-weight: bolder;
						color:#2979FF;

						.label {
							width: 83rpx;
						}

						.value {
							width: 110rpx;
							text-align: end;
						}
					}
					.delete{
						width: 100%;
						margin-top: 10rpx;
						padding: 10rpx;
						border-top: 1rpx solid #eaeaea;
						display: flex;
						justify-content: flex-end;
					}

				}
			}
		}

		.add {
			position: fixed;
			height: 100rpx;
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: space-around;
			border-radius: 50%;
			box-sizing: border-box;

			u-button {
				width: 80%;

				&::v-deep button {
					background-color: #FFC300;
					color: white;
				}
			}

		}
	}
</style>
